<template>
    <el-menu
      class="categories"
      default-active="0"
      @select="handleSelect"
      active-text-color="gray"
      >
      <el-menu-item index="0">
        <i class="el-icon-menu"></i>
        <span style="color:white" >全部</span>
      </el-menu-item>
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span style="color:white" >文学</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span style="color:white" >流行</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-menu"></i>
        <span  style="color:white">文化</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-menu"></i>
        <span style="color:white" >生活</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-menu"></i>
        <span  style="color:white">经管</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-menu"></i>
        <span style="color:white">科技</span>
      </el-menu-item>
    </el-menu>
  </template>
  
  <script>
    export default {
      name: 'SideMenu',
      data () {
        return {
          cid: ''
        }
      },
      methods: {
        handleSelect (key, keyPath) {
          this.cid = key
          this.$emit('indexSelect')
          console.log(33333333333);
        }
      }
    }
  </script>
  
  <style scoped>
    .categories {
      position: fixed;
      margin-left: 43%;
      left: -43%;
      margin-top: 1.6%;
      width: 150px;
      background-color: #181b1d55;
    }
  </style>